/**
 * Created by user on 2017/9/5.
 */
window.onload = function(){
    //console.log($(".test"));
    //流程图数据
    var data = [{
        "id": "2497839",
        "pid": 0,
        "completetime": "2017-08-17 13:16:40",
        "realname": "陈阳",
        "text": "陈阳:ff",
        "layer": 1,
        "child": [
            {
                "id": "104",
                "pid": "2497839",
                "completetime": "2017-08-17 13:17:04",
                "realname": "杨杰",
                "text": "杨杰:ffff",
                "layer": 2,
                "child": [
                    {
                        "id": "110",
                        "pid": "104",
                        "completetime": null,
                        "realname": "王靖",
                        "text": "",
                        "layer": 3
                    },
                    {
                        "id": "106",
                        "pid": "104",
                        "completetime": "2017-08-17 13:17:37",
                        "realname": "高勇",
                        "text": "高勇:ff",
                        "layer": 3,
                        "child": [
                            {
                                "id": "108",
                                "pid": "106",
                                "completetime": "2017-08-17 13:18:13",
                                "realname": "杨渝平",
                                "text": "杨渝平:1111",
                                "layer": 4,
                                "child": [
                                    {
                                        "id": "245",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "白雪",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "157",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "郑婷",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "158",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "周文渝",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "159",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "邹宇蜜",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "160",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "谢家琳",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "161",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "赵云",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "162",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "周梅",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "168",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "谢京锐",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "169",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "周彧",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "170",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "韩瑜",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "172",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "王训芬",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "175",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "王钰娇",
                                        "text": "",
                                        "layer": 5
                                    },
                                    {
                                        "id": "178",
                                        "pid": "108",
                                        "completetime": null,
                                        "realname": "肖璐",
                                        "text": "",
                                        "layer": 5
                                    }
                                ]
                            },
                            {
                                "id": "248",
                                "pid": "106",
                                "completetime": null,
                                "realname": "邹震",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "249",
                                "pid": "106",
                                "completetime": null,
                                "realname": "陈阳",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "153",
                                "pid": "106",
                                "completetime": null,
                                "realname": "王国平",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "154",
                                "pid": "106",
                                "completetime": null,
                                "realname": "贾小明",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "155",
                                "pid": "106",
                                "completetime": null,
                                "realname": "叶莉",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "156",
                                "pid": "106",
                                "completetime": null,
                                "realname": "叶新义",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1572977",
                                "pid": "106",
                                "completetime": null,
                                "realname": "郑婷",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1584446",
                                "pid": "106",
                                "completetime": null,
                                "realname": "周文渝",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1599359",
                                "pid": "106",
                                "completetime": null,
                                "realname": "邹宇蜜",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1608121",
                                "pid": "106",
                                "completetime": null,
                                "realname": "谢家琳",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1611396",
                                "pid": "106",
                                "completetime": null,
                                "realname": "张飞",
                                "realname": "张飞",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1626011",
                                "pid": "106",
                                "completetime": null,
                                "realname": "周梅",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1685026",
                                "pid": "106",
                                "completetime": null,
                                "realname": "谢京锐",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1697526",
                                "pid": "106",
                                "completetime": null,
                                "realname": "周彧",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1705909",
                                "pid": "106",
                                "completetime": null,
                                "realname": "韩瑜",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1725129",
                                "pid": "106",
                                "completetime": null,
                                "realname": "王训芬",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1759426",
                                "pid": "106",
                                "completetime": null,
                                "realname": "王钰娇",
                                "text": "",
                                "layer": 4
                            },
                            {
                                "id": "1787676",
                                "pid": "106",
                                "completetime": null,
                                "realname": "肖璐",
                                "text": "",
                                "layer": 4
                            }
                        ]
                    }
                ]
            },
            {
                "id": "105",
                "pid": "2497839",
                "completetime": null,
                "realname": "刘书平",
                "text": "",
                "layer": 2
            },
            {
                "id": "247",
                "pid": "2497839",
                "completetime": null,
                "realname": "郑林",
                "text": "",
                "layer": 2
            },
            {
                "id": "151",
                "pid": "2497839",
                "completetime": null,
                "realname": "盛丽",
                "text": "",
                "layer": 2
            },
            {
                "id": "152",
                "pid": "2497839",
                "completetime": null,
                "realname": "黄忠",
                "text": "",
                "layer": 2
            },
            {
                "id": "1536420",
                "pid": "2497839",
                "completetime": null,
                "realname": "王国平",
                "text": "",
                "layer": 2
            },
            {
                "id": "1546054",
                "pid": "2497839",
                "completetime": null,
                "realname": "贾小明",
                "text": "",
                "layer": 2
            },
            {
                "id": "1553309",
                "pid": "2497839",
                "completetime": null,
                "realname": "叶莉",
                "text": "",
                "layer": 2
            },
            {
                "id": "1563970",
                "pid": "2497839",
                "completetime": null,
                "realname": "叶新义",
                "text": "",
                "layer": 2
            },
            {
                "id": "1575333",
                "pid": "2497839",
                "completetime": null,
                "realname": "郑婷",
                "text": "",
                "layer": 2
            },
            {
                "id": "1583774",
                "pid": "2497839",
                "completetime": null,
                "realname": "周文渝",
                "text": "",
                "layer": 2
            },
            {
                "id": "1592041",
                "pid": "2497839",
                "completetime": null,
                "realname": "邹宇蜜",
                "text": "",
                "layer": 2
            },
            {
                "id": "1604043",
                "pid": "2497839",
                "completetime": null,
                "realname": "谢家琳",
                "text": "",
                "layer": 2
            },
            {
                "id": "1617147",
                "pid": "2497839",
                "completetime": null,
                "realname": "刘备",
                "text": "",
                "layer": 2
            },
            {
                "id": "1626408",
                "pid": "2497839",
                "completetime": null,
                "realname": "周梅",
                "text": "",
                "layer": 2
            }
        ]
    }];
    // var data = [{
    //     "id":"246",
    //     "pid":0,
    //     "completetime":"2017-08-25 11:02:21",
    //     "realname":"zz",
    //     "text":"\u5f20\u65ed:1102",
    //     "layer":1,
    //     "child":[{
    //         "id":"104",
    //         "pid":"246",
    //         "completetime":null,
    //         "realname":"yy",
    //         "text":"",
    //         "layer":2
    //     }]
    // }] 
    var yzNodeLen = 0;//叶子节点总数
    var Factory = function(type, content){
        if (this instanceof Factory){
            var _s = new this[type](content);
            return _s
        }else{
            return new Factory(type, content);
        }
    };
    var debrisFun = {
        currentNode : 0,//当前节点孩子节点的叶子节点数量
        cycleFun : function(content,index){
            // console.log(content)
            var _this = this;
            content.forEach(function(elem,i){
                var _obj = {},len = 0;
                _this.currentNode = 0;//初始化当前节点的孩子节点的叶节点数量
                _obj.id = elem.id;//设置当前节点id
                _obj.realname = elem.realname;//设置当前节点真名
                _obj.pid = elem.pid;//设置当前节点pid
                _obj.text = elem.text;//设置当前节点text
                _obj.layer = elem.layer;//设置当前节点楼层
                _obj.completetime = elem.completetime;//设置当前节点完成时间
                _obj.childLen = 0;
                _obj.yzPreNodeLen = yzNodeLen,//设置当前节点前面的所有节点数量
                _obj.childArr = [],
                _obj.parentIndex = index;//父节点在其行内index位置
                if (!treeData[elem.layer-1]){
                    treeData[elem.layer-1] = [];
                }
                
                treeData[elem.layer-1].push(_obj);
                if (elem.child){
                    _obj.childLen = elem.child.length;//设置当前节点子节点数量
                    _this.getCurrentNodeLen(elem.child);
                    // console.log(_this.currentNode);
                    if(_this.currentNode % 2 === 1){
                        _obj.currentNodePosition = yzNodeLen * initData.nodeWidth * 1.5 + (_this.currentNode-1)/2 * initData.nodeWidth * 1.5 + initData.nodeWidth/2;
                    }else{
                        _obj.currentNodePosition = yzNodeLen * initData.nodeWidth * 1.5 + _this.currentNode/2 * initData.nodeWidth * 1.5 + initData.nodeWidth/2;
                    }
                    _this.cycleFun(elem.child,i);
                }else{
                    yzNodeLen = yzNodeLen + 1;//获取叶子节点数量
                    _obj.currentNodePosition = yzNodeLen * initData.nodeWidth * 1.5 - initData.nodeWidth
                }
                if(elem.layer > 1){
                    //设置第一层所有子节点的位置
                    treeData[elem.layer-2][index].childArr.push(_obj.currentNodePosition + initData.nodeWidth/2)
                }
            });
        },
        getCurrentNodeLen:function(data){//获取当前节点子节点中叶子节点数量
        //    console.log(data);
           var _this = this;
           data.forEach(function(elem){
               if(elem.child){
                    _this.getCurrentNodeLen(elem.child);
               }else{
                   _this.currentNode = _this.currentNode + 1;
               }
           })
        },
        addChild : function(content,index){
            var _child = "",
                currentCanvan = '<canvas id=canvas_'+ index +'></canvas>'
                rowLen = content.length;//一行的长度
            for (var key in content){
                _child += '<div class="_child" style="left:'+ content[key].currentNodePosition +'px">'+ content[key].realname + '</div>';
            }
            $(".child_container")[index].innerHTML = _child;
            $(".child_container").eq(index).append(currentCanvan);
        },
        setProperty : function(len,floor){//设置属性
            $('.process_container').css({//设置最外框属性
                height:initData.containerHeight === 'auto' ? floor * (initData.rowHeight + 5) + 'px' : initData.containerHeight,
                margin: 'auto'
            });
            if(len * initData.nodeWidth * 1.5 + initData.nodeWidth/2 < $('.process_container').width()){
                $('.process_container').css({
                   width: len * initData.nodeWidth * 1.5 + initData.nodeWidth/2,
                });
            }else{
                $('.process_container').css({
                    width: initData.containerWidth + 'px' ,
                    overflowX: 'scroll',
                 });
            }
            //设置节点属性
            $('.process_container ._child').css({
                display: 'inline-block',
                width: initData.nodeWidth + 'px',
                textAlign: 'center',
                border: '1px solid red',
                borderRadius: 5 + 'px',
                height: initData.nodeHeight + 'px',
                lineHeight: initData.nodeHeight + 'px',
                position: 'absolute',
                borderColor: initData.nodeBorderColor,
                color: initData.nodeColor,
                backgroundColor: initData.nodeBackgroundColor
            });
            //设置行属性
            $('.process_container .child_container').css({
                width: len * initData.nodeWidth * 1.5 + initData.nodeWidth/2 + 'px',
                height: initData.rowHeight,
                position: 'relative'
            });
            //设置canvas属性
            $('.process_container canvas').attr({
                width: len * initData.nodeWidth * 1.5 + initData.nodeWidth/2 + 'px',
                height: initData.rowHeight - initData.nodeHeight + 'px',
            }).css({
                marginTop: initData.nodeHeight + 2 + 'px'
            });
            //设置横向偏移量
            var scrollPosition = (len * initData.nodeWidth * 1.5 + initData.nodeWidth/2 -  $('.process_container').width())/2;
            $(".process_container").scrollLeft(scrollPosition);
        },
        setCanvas : function(data){
            // console.log(data);
            var _this = this;
            data.forEach(function(elem,index){
                if(elem.childLen > 0){
                    _this.drawCanvas(elem);
                }
            })
        },
        drawCanvas : function(data){//划线
            var index = data.layer-1;
            var startPoint = data.currentNodePosition + (initData.nodeWidth+2)/2 - 1;
            var lineHeight = (initData.rowHeight - (initData.nodeHeight + 2))/2;
            var cxt=$("#canvas_" + index)[0].getContext("2d");
            cxt.lineWidth = initData.lineWidth;
            cxt.strokeStyle = initData.lineColor;
            cxt.beginPath();
            cxt.moveTo(startPoint, 0);
            cxt.lineTo(startPoint, lineHeight);
            cxt.stroke();
            cxt.moveTo(startPoint, lineHeight);
            cxt.lineTo(data.childArr[0], lineHeight);
            cxt.stroke();
            cxt.moveTo(startPoint, lineHeight);
            cxt.lineTo(data.childArr[data.childArr.length-1], lineHeight);
            cxt.stroke();
            data.childArr.forEach(function(elem){
                cxt.moveTo(elem, lineHeight);
                cxt.lineTo(elem, lineHeight * 2);
                cxt.stroke();
                cxt.moveTo(elem, lineHeight * 2);
                cxt.lineTo(elem-5, lineHeight * 2-5);
                cxt.stroke();
                cxt.moveTo(elem, lineHeight * 2);
                cxt.lineTo(elem+5, lineHeight * 2-5);
                cxt.stroke();
            })
            cxt.closePath();
        }
    };
    var treeData = [];//树循环整理数据
    //方法list
    Factory.prototype = {
        cycleTree : function(content){
            var floor = 0;
            debrisFun.cycleFun(content,0);
            treeData.forEach(function(elem,index){
                var _container = "<div class='child_container'></div>";
                $(".process_container").append(_container);
                debrisFun.addChild(elem,index);
                floor = floor + 1;
            });
            debrisFun.setProperty(yzNodeLen,floor);
            treeData.forEach(function(elem,index){
                debrisFun.setCanvas(elem);
            });
        }
    };
    // 初始数据设置
    var initData = {
        containerWidth : 'auto',//容器宽度
        containerHeight : 'auto',//容器高度
        nodeWidth : 70,//设置节点宽度
        nodeHeight : 30,//设置节点高度
        nodeBorderColor : '#5d85a1',//设置节点边框颜色
        nodeColor : '#666666',//设置节点字体颜色
        rowHeight : 100,//行高度
        lineWidth : 1,//canvas线条宽度
        lineColor : '#69b5ca',//canvas线条颜色,
        nodeBackgroundColor : '#b1e2fe'
    }
    //整理数据格式
    Factory('cycleTree',data);
};